import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  render() {
    const {
      todo: { todoName, isDone, id }, // 解构props里面的todo之后,再解构todo对象
    } = this.props
    return (
      <li>
        <label>
          {/* 注意: react组件中的表单元素的值如果被控制了, 则必须配合一个onChange.onChange用来修改控制数据,从而让表单元素的值发生变化 */}
          <input
            type="checkbox"
            checked={isDone}
            onChange={(e) => {
              // console.log(e.target.checked) // 注意: 虽然复选框被控制了,点击也没有效果,但是可以通过e.target.checked拿到目标值
              // 将当前任务的id传递给app
              this.props.updateTodo(id)
            }}
          />
          <span className={isDone ? 'done' : ''}>{todoName}</span>
        </label>
        <button
          className="btn btn-danger"
          onClick={() => {
            if (!confirm('确定要删除这条数据吗')) return
            this.props.delTodo(id)
          }}
        >
          删除
        </button>
      </li>
    )
  }
}
